<template>
	<div style="width: 100%">
		<el-input
			ref="input"
			v-model="money"
			clearable
			v-bind="$attrs"
			@blur="blur"
			v-on="handleEvents"
			:size="size"></el-input>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				required: false,
			},

			min: {
				required: false,
				type: Number,
			},
			max: {
				required: false,
				type: Number,
			},
			size: {
				required: false,
				type: String,
			},
			handleEvents: {
				required: false,
				type: Object,
			},
			formData: {
				required: false,
				type: Object,
			},
			index: {
				required: false,
				type: Number,
			},
		},
		data() {
			return {
				// money: 0,
				symbolNum: 0,
			};
		},
		provide() {
			return {};
		},
		computed: {
			money: {
				get() {
					if (typeof this.value == 'string' && this.value) {
						this.$emit(
							'input',
							isNaN(Number(this.value)) ? 0 : Number(this.value),
						);
						return undefined;
					}
					let value = this._.cloneDeep(
						this.value?.toString()?.trim?.(),
					);

					if (value === undefined || value === null || value === '') {
						return undefined;
					}

					if (value.at(-1) == '.') {
						return value;
					}

					let price = Number(value);
					let fixed2 = Number(price.toFixed(2));
					let price_thousand = new Intl.NumberFormat('en-us').format(
						fixed2,
					);

					let input = this.$refs.input?.$refs?.input;
					const symbolNum = price_thousand.match(/\,/g)?.length ?? 0;
					if (input) {
						let positionStart = input.selectionStart;
						console.log(positionStart);
						let diff = symbolNum - this.symbolNum;

						if (price_thousand[positionStart] == ',') {
							this.$nextTick(() => {
								input.setSelectionRange(
									positionStart,
									positionStart,
								);
							});
						} else {
							this.$nextTick(() => {
								input.setSelectionRange(
									positionStart + diff,
									positionStart + diff,
								);
							});
						}
						this.symbolNum = symbolNum;
					}
					return price_thousand;
				},
				set(val) {
					let value = this._.cloneDeep(val)?.toString();
					if (value === undefined || value === null || value === '') {
						this.$emit('input', value);
						return;
					}
					if (value.at(-1) == '.') {
						this.$emit('input', value);
						return;
					}
					let [integer, decimals] = value.split('.');

					let integerNum = integer?.match(/\d/g)?.join();
					let decimalsNum = decimals?.match(/\d/g)?.join();
					let num;
					if (decimalsNum) {
						num = `${integerNum}.${decimalsNum}`;
					} else {
						num = `${integerNum}`;
					}
					num = num.replace(/\,/g, '');

					this.$emit('input', isNaN(num) ? 0 : Number(num));
				},
			},
		},
		beforeDestroy() {},
		mounted() {},
		methods: {
			blur() {
				if (
					this.money !== null &&
					this.money !== undefined &&
					this.money !== ''
				) {
					let money = this.money.replace(/\,/g, '');
					if (money > this.max) {
						this.money = this.max * 1;
					}
					if (money < this.min) {
						this.money = this.min * 1;
					}
				}
				if (this?.handleEvents?.on?.blur) {
					this?.handleEvents?.on?.blur?.({
						row: this.formData,
						index: this.index,
					});
				}
			},
		},
	};
</script>

<style></style>
